<template>
  <section class="log_page">
    <div class="global_tab">
      <button class="active" @click="routerToMd">分享知识</button>
      <button>解决问题</button>
    </div>
    <div class="login_box_inner">
      <div class="login_box_tab">
        <p @click="changeTab('IN')" class="login_tab_button" :class="{is_active: activeType === 'IN'}">SIGN IN</p>
        <p @click="changeTab('UP')" class="login_tab_button" :class="{is_active: activeType === 'UP'}">SIGN UP</p>
      </div>
      <div class="login_box_form">
        <div class="login_form_body">
          <div class="form_body_inner">
            <div class="form_item_box">
              <p class="form_item_label" :class="{is_value: username}">请输入用户名</p>
              <input ref="username" @focus="handleFocus('username')" @blur="handleBlue('username')" class="form_item_input" type="text" placeholder="请输入用户名" v-model="username">
            </div>
            <div class="form_item_box">
              <p class="form_item_label":class="{is_value: password}">请输入密码</p>
              <input ref="password" @focus="handleFocus('password')" @blur="handleBlue('password')" class="form_item_input" type="text" placeholder="请输入密码" v-model="password">
            </div>
          </div>
        </div>
        <div class="login_form_submit">
          <p class="login_submit_text">LET ME IN</p>
          <div @click="handleLogin" class="login_submit_button">
            <i class="iconfont icon-arrow-right click_ico"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 
    <div class="log_box">
      <div class="log_item">
        <p>用户名：</p>
        <input type="text" v-model="username">
      </div>
      <div class="log_item">
        <p>密码：</p>
        <input type="text" v-model="password">
      </div>
      <p class="log_button" @click="handleLogin">
        登录
      </p>
    </div> -->
  </section>
</template>

<script src="./log.js"></script>

<style lang="less" src="./log.less" scoped></style>